<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view
    class="component-add-proof-popup"
    :class="{show: showPopup}"
  >
    <view
      v-if="showPopup"
      class="refund-progress-pop-mask"
      @tap="showPopup=false"
    />
    <view
      class="close"
      @tap="showPopup=false"
    >
      <image src="/static/images/close.png" />
    </view>
    <view class="progress-con">
      <view class="form-box">
        <view class="label">
          凭证说明
        </view>
        <textarea
          v-model="buyerDesc"
          class="textarea"
          placeholder="补充描述，最多200字"
          maxlength="200"
        />
        <view class="label">
          上传凭证
        </view>
        <view class="upload-box">
          <imgs-upload
            v-model="imgUrls"
            :img-num="3"
          />
        </view>
      </view>
      <view class="btn-box">
        <view
          class="submit-btn"
          @tap="onSubmit"
        >
          提交
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const emits = defineEmits(['update:modelValue', 'changeData'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  refundDetail: {
    type: Object,
    default: () => ({})
  }
})

const showPopup = computed({
  get () {
    return props.modelValue
  },
  set () {
    emits('update:modelValue', false)
  }
})

const imgUrls = ref('')
const buyerDesc = ref('')
let isSubmit = false // 正在提交申请
const onSubmit = () => {
  if (!buyerDesc.value.trim()) {
    uni.showToast({
      title: '凭证说明不能为空',
      icon: 'none'
    })
    return
  }
  if (!imgUrls.value.length) {
    uni.showToast({
      title: '请上传凭证',
      icon: 'none'
    })
    return
  }
  // 防止重复提交
  if (isSubmit) return
  isSubmit = true
  http.request({
    url: '/multishop/orderRefundIntervention/saveInterventionVoucher',
    method: 'POST',
    data: {
      refundId: props.refundDetail.refundId,
      sysType: 1, // 0.普通用户 1.商家端 2.平台端
      refundSts: props.refundDetail.refundStatus,
      voucherDesc: buyerDesc.value,
      imgUrls: imgUrls.value
    }
  }).then(() => {
    uni.showToast({
      title: '提交成功',
      icon: 'none'
    })
    setTimeout(() => {
      isSubmit = false
      showPopup.value = false
      buyerDesc.value = ''
      imgUrls.value = ''
      emits('changeData')
    }, 1000)
  }).catch(() => {
    isSubmit = false
  })
}

</script>
<style lang="scss" scoped>
.component-add-proof-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  transition: all .3s;
  &.show {
    height: 60%;
    bottom: 0;
    left: 0;
  }
  .refund-progress-pop-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: -1;
  }
  .close {
    width: 24rpx;
    height: 24rpx;
    opacity: .5;
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    font-size: 0;
    z-index: 2;
    image {
      width: 24rpx;
      height: 24rpx;
    }
  }
  .progress-con {
    height: 100%;
    padding-top: 24rpx;
    padding-bottom: calc(24rpx + var(--mall4j-safe-area-inset-bottom));
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .form-box {
      background: #fff;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      padding: 30rpx;
      flex: 1;
      .label {
        font-size: 28rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
      }
      .textarea {
        margin: 0 0 30rpx;
        padding: 20rpx 30rpx;
        width: auto;
        height: 200rpx;
        line-height: 40rpx;
        background: #f6f8fa;
        border-radius: 20rpx;
        font-size: 26rpx;
      }
    }
    .btn-box{
      width: 750rpx;
      padding: 24rpx;
      box-sizing: border-box;
      .submit-btn{
        overflow: hidden;
        height: 70rpx;
        background-color: #082ba6;
        color: #fff;
        border-radius: 70rpx;
        text-align: center;
        line-height: 70rpx;
      }
    }
  }
}
</style>
